	<template>
		<view class="">
			<!-- <newvin @fileList='fileList'></newvin> -->
			<view class="vin_con">
				<view class="vin_upload">
					<u-upload :custom-btn="true" :action="action" :show-progress="false" max-count='1' width="702rpx"
						height="265rpx" :file-list="fileList" @on-remove="remove" @on-success="upData">
						<view slot="addBtn" class="slot-btn">
							<image src="http://ibuycarweb.tj-dasheng.com/img/xcx/upload.png"
								style="width: 702rpx; height: 296rpx;" mode="widthFix"></image>

						</view>
					</u-upload>
				</view>


			</view>
			<view class="searchBox">
				<view class="test">VIN码</view>
				<view class="searchContext">

					<u-input style="width: 100%;" v-model="getInfo.vin" maxlength='17' trim='true' @blur="vpnGet()"
						@input="toUppercase()" :clearable="false" placeholder-style="color: #999;" type="text"
						placeholder="请输入VIN码" />
					<!-- <u-icon name="camera-fill" @click="scanCode"></u-icon> -->
				</view>
				
				<view class="test">品牌</view>
				<view class="searchContext">
					<u-input style="width: 100%;" @blur="lichen()" v-model="getInfo.brand" type='text' trim='true'
						:clearable="false" placeholder-style="color: #999;" placeholder="请输入品牌" />
					<!-- <u-icon name="camera-fill" @click="scanCode"></u-icon> -->
				</view>
				
				<view class="test">车系</view>
				<view class="searchContext">
					<u-input style="width: 100%;" @blur="lichen()" v-model="getInfo.series" type='text' trim='true'
						:clearable="false" placeholder-style="color: #999;" placeholder="请输入车系" />
					<!-- <u-icon name="camera-fill" @click="scanCode"></u-icon> -->
				</view>
				
				<view class="test">车型</view>
				<view class="searchContext">
					<u-input style="width: 100%;" @blur="lichen()" v-model="getInfo.carModel" type='text' trim='true'
						:clearable="false" placeholder-style="color: #999;" placeholder="请输入车型" />
					<!-- <u-icon name="camera-fill" @click="scanCode"></u-icon> -->
				</view>
				
				<view class="test">出厂时间</view>
				<view class="searchContext">
					<u-input style="width: 100%;" @blur="lichen()" v-model="getInfo.productionDate" type='text' trim='true'
						:clearable="false" placeholder-style="color: #999;" placeholder="请输入出厂时间" />
					<!-- <u-icon name="camera-fill" @click="scanCode"></u-icon> -->
				</view>
				
				<view class="test">车身颜色</view>
				<view class="searchContext">
					<u-input style="width: 100%;" @blur="lichen()" v-model="getInfo.carColor" type='text' trim='true'
						:clearable="false" placeholder-style="color: #999;" placeholder="请输入车身颜色" />
					<!-- <u-icon name="camera-fill" @click="scanCode"></u-icon> -->
				</view>

				<view class="test">行驶里程（公里）</view>
				<view class="searchContext">

					<u-input style="width: 100%;" @blur="lichen()" v-model="getInfo.mileage" type='number' trim='true'
						:clearable="false" placeholder-style="color: #999;" placeholder="请输入行驶里程" />
					<!-- <u-icon name="camera-fill" @click="scanCode"></u-icon> -->
				</view>

			</view>
			<!-- <view class="vin_con" style="margin-top: 50rpx;">
				<view class="vin_upload">
					<u-upload :custom-btn="true" :action="action" :show-progress="false" max-count='1' width="702rpx"
						height="265rpx" :file-list="fileList1" @on-remove="remove1" @on-success="upData1">
						<view slot="addBtn" class="slot-btn">
							<image src="http://ibuycarweb.tj-dasheng.com/img/xcx/carpicture.png"
								style="width: 702rpx; height: 296rpx;" mode="widthFix"></image>

						</view>
					</u-upload>
				</view>


			</view> -->
			<view class="content1" @click="shangchuang">
				<image :src='mysrc' mode='aspectFill' v-if="mysrc" />
				<view class="icon1" v-if="mysrc" @click.stop="mydel">
					<u-icon class="u-icon1" name="close" size="20" color="#fff"></u-icon>
				</view>
			</view>
			<u-modal v-model="show" :content="content" @confirm="confirmDate" show-cancel-button='true'></u-modal>

			<view class="bottoms" @click="getzhck">
				提交
			</view>

		</view>
		</view>
	</template>

	<script>
		import app from "../../App.vue"
		import API from "@/api/business.js"
		export default {
			data() {
				return {
					getInfo: {
						brand:"",
						series:"",
						carModel:"",
						productionDate:"",
						carColor:"",
						mileage: "",
						vin: "",
						image: ''
					},
					orderNo: "",
					deldetails: 1,
					detectionCarReportId: '',
					detectionOrderId: '',
					action: getApp().globalData.pictureUpload,
					https: getApp().globalData.picturePath,
					fileList: [],
					fileList1: [],
					lists: [],
					form: {
						search: ""
					},
					dlJustVice: '',
					carPicture: '',
					mysrc: '',
					show: false,
					content: '确定要删除此项吗',
				};
			},
			onLoad(option) {
				console.log(option)
				this.detectionCarReportId = option.detectionCarReportId;
				this.detectionOrderId = option.detectionOrderId;
				// this.merDetectionOrderDetectionTypes();
				this.shows()
			},
			onShow() {
				let that = this
				if(this.mysrc){
						uni.uploadFile({
							url: getApp().globalData.pictureUpload, //仅为示例，非真实的接口地址
							filePath: this.mysrc,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								var data = JSON.parse(uploadFileRes.data)
								that.carPicture = data.data.fileId
					
							}
						});
				}

			},
			methods: {


				// 点击上传图片时触发 图片裁剪逻辑
				shangchuang() {
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						sourceType: ['album', 'camera'],
						success: function(res) {
							const src = res.tempFilePaths[0]
							wx.navigateTo({
								url: '/pagesC/ceshi/ceshi?src=' + src,
							})
						},
					})
				},
				mydel() {
					this.show = true;
				},

				confirmDate() {
					this.mysrc = '';
					this.carPicture = ''
				},


				lichen(e) {
					console.log(e)
				},
				shows() {
					let data = {
						token: uni.getStorageSync('token'),
						detectionCarReportId: this.detectionCarReportId,
					}
					API.merDetectionOrderGetCarReport_jbxi(data).then(res => {
						if (res.code == 200) {
							console.log(res)
							this.getInfo.vin = res.data.vin;
							if (res.data.mileage) {
								this.getInfo.mileage = res.data.mileage;
							}
							if (res.data.brand) {
								this.getInfo.brand = res.data.brand;
							}
							if (res.data.series) {
								this.getInfo.series = res.data.series;
							}
							if (res.data.carModel) {
								this.getInfo.carModel = res.data.carModel;
							}
							if (res.data.productionDate) {
								this.getInfo.productionDate = res.data.productionDate;
							}
							if (res.data.carColor) {
								this.getInfo.carColor = res.data.carColor;
							}
							
							

							this.dlJustVice = res.data.dlJustVice;
							if (res.data.dlJustVice) {
								this.fileList = [{
									url: this.https + res.data.dlJustVice
								}]
							} else {

								this.fileList = []
							}

							if (res.data.carPicture) {
								this.mysrc = this.https + res.data.carPicture
								this.carPicture = res.data.carPicture;
							} else {

								this.mysrc = ''
								this.carPicture = ''
							}

						}

					})
				},
				remove(index, lists, name) {
					this.fileList = lists.map(item => {
						return item.response.data.fileId
					}).join(',')

					this.dlJustVice = this.fileList;
					// console.log(this.fileList)
				},
				upData(data, index, lists, name) {
					console.log(lists)
					this.fileList = lists.map(item => {
						return item.response.data.fileId
					}).join(',')

					this.dlJustVice = this.fileList
					this.getOcrInfo(this.fileList)
				},
				remove1(index, lists, name) {
					this.fileList1 = lists.map(item => {
						return item.response.data.fileId
					}).join(',')

					this.carPicture = this.fileList1;
					// console.log(this.fileList)
				},
				upData1(data, index, lists, name) {
					console.log(lists)
					this.fileList1 = lists.map(item => {
						return item.response.data.fileId
					}).join(',')

					this.carPicture = this.fileList1
				},
				toUppercase(e) {
					this.getInfo.vin = this.getInfo.vin.toUpperCase();
					console.log(this.getInfo.vin)
				},
				vpnGet(e) {
					if (e.length == 17) {

					} else {
						this.$u.toast('请输入17位车架号');
					}
				},
				getOcrInfo(image) {
					console.log(image);
					let data = {
						image: image,
					}
					API.merDetectionOrderGetOcrInfo(data).then(res => {
						if (res.code == 200) {
							this.getInfo.vin = res.data.vin
						} else {
							this.$u.toast('获取VIN码失败');
						}
					})
				},
				goUserAgreement() {
					uni.navigateTo({
						url: "/pages/login/userAgreement"
					})
				},
				del(e) {
					this.deldetails = e
				},
				getzhck() {
					if (!this.getInfo.vin) {
						this.$u.toast('请先输入VIN码');
						return false
					}
					//正则表达式
					let reg_chassis = /^[A-HJ-NPR-Z\d]{17}$/; //车架号
					let sign_chassis = RegExp(reg_chassis).test(this.getInfo.vin);
					if (this.getInfo.vin && !sign_chassis) {
						this.$u.toast('请输入17位有大写字母和数字组成VIN码');
						return false
					}

					if (!this.getInfo.mileage) {
						this.$u.toast('请输入行驶里程');
						return false
					}
					// if (this.dlJustVice == '') {
					// 	this.$u.toast('上传驾驶证');
					// 	return false
					// }
					console.log(this.carPicture)
					if (this.carPicture == '') {
						this.$u.toast('车辆图片为必传');
						return false
					}
					if (this.getInfo.brand == '') {
						this.$u.toast('请填写车辆品牌');
						return false
					}
					if (this.getInfo.series == '') {
						this.$u.toast('请填写车系');
						return false
					}
					if (this.getInfo.carModel == '') {
						this.$u.toast('请填写车型');
						return false
					}
					if (this.getInfo.productionDate == '') {
						this.$u.toast('请填写出厂日期');
						return false
					}
					if (this.getInfo.carColor == '') {
						this.$u.toast('请填写车身颜色');
						return false
					}


					let data = {
						token: uni.getStorageSync('token'),
						detectionOrderId: this.detectionOrderId,
						detectionCarReportId: this.detectionCarReportId,
						orderState: 'saveAndFinish',
						vin: this.getInfo.vin,
						mileage: this.getInfo.mileage,
						dlJustVice: this.dlJustVice,
						carPicture: this.carPicture,
						brandName:this.getInfo.brand,
						orderSeriesName:this.getInfo.series,
						modelName:this.getInfo.carModel,
						productionDate:this.getInfo.productionDate,
						color:this.getInfo.carColor
					}

					console.log(data)
					API.merDetectionOrderAddCarReport_jbxi(data).then(res => {
						console.log(res)
						if (res.code == 200) {
							uni.navigateBack({
								delta: 1
							});
						}

					})
				},
				// 切换城市code
				// fileList(fileList){
				// 	this.getInfo.image = fileList
				// 	console.log("从组建获取的列表")
				// 	console.log(this.getInfo.image)
				// 	this.getOcrInfo(this.getInfo.image)
				// },

			}
		};
	</script>
	<style>
		page {
			background-color: #fff;
		}
	</style>
	<style scoped lang="scss">
		.content1 {
			width: 500rpx;
			height: 500rpx;
			background: url('http://ibuycarweb.tj-dasheng.com/img/xcx/sctp007.png');
			background-size: 100% 100%;
			border-radius: 10rpx;
			margin: auto;
			position: relative;
			margin-top: 50rpx;

			// background: #fff;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.icon1 {
			width: 44rpx;
			height: 44rpx;
			border-radius: 50%;
			background: red;
			position: absolute;
			right: -22rpx;
			top: -22rpx;
			z-index: 111;
		}

		.u-icon1 {
			font-size: 30rpx;
			text-align: center;
			display: block;
		}

		.test {
			font-size: 34rpx;
			color: #2C2C2C;
			padding: 25rpx 0 25rpx 5rpx;
		}

		.bottoms {
			width: 666rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			background-image: linear-gradient(90deg, #10A098 0%, #0062B6 100%);
			border-radius: 45rpx;

			color: #fff;
			margin: auto;
			margin-top: 100rpx;
		}

		.bottoms view:nth-child(1) {
			border: 1px solid #0062B6;
			border-radius: 8rpx;
			width: 226rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 36rpx;
			color: #0062B6;
		}

		.bottoms view:nth-child(2) {
			border: 1px solid #0062B6;
			border-radius: 8rpx;
			width: 432rpx;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 36rpx;
			color: #fff;
			background: #0062B6;
		}

		.buttons {
			view {
				margin-top: 40rpx;
			}
		}

		.searchBox {
			padding: $uni-widthspace;

			.searchContext {
				border-radius: 8rpx;
				background: #F5F5F5;
				display: flex;
				padding: 10rpx 24rpx;
				box-sizing: border-box;
				font-size: 40rpx;
				color: #0062B6;
				margin-bottom: 31rpx;
				border: 1px solid #EFEFEF;

				image {
					width: 42rpx;
					height: 30rpx;
					margin-top: 20rpx;
				}
			}
		}

		.tip {
			font-family: PingFangSC-Regular;
			font-size: 24rpx;
			color: #999999;
			text-align: center;
		}

		.ckyl {
			font-family: PingFangSC-Regular;
			font-size: 36rpx;
			color: #0062B6;
			text-align: center;
		}

		.u-size-default {
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			padding: 10rpx 0;
		}

		.kscx {
			width: 100%;
			background: #0062B6;
			border-radius: 8rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: #fff;
			font-family: PingFangSC-Regular;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
		}

		.zh {
			display: flex;
			justify-content: space-between;
			margin-bottom: 52rpx;
			margin-top: 15rpx;
			border-radius: 4rpx;
			position: relative;

			view {
				height: 88rpx;
				background: #F5F5F5;
				font-size: 30rpx;
				color: #666;
				text-align: center;
				line-height: 88rpx;
			}

			.cc {
				font-size: 24rpx;
				position: absolute;
				width: 98rpx;
				height: 32rpx;
				text-align: center;
				line-height: 32rpx;
				top: -16rpx;
				left: 270rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.zh view:nth-child(1) {
			width: 342rpx;
		}

		.zh view:nth-child(2) {
			width: 181rpx;
		}

		.zh view:nth-child(3) {
			width: 181rpx;
		}

		.active {
			background: #0062B6 !important;
			color: #fff !important;
		}

		.vin_con {
			height: auto;
			box-sizing: border-box;
			margin: $uni-widthspace $uni-widthspace 0px;

			.vin_upload {
				width: 100%;
				height: 296rpx;
				overflow: hidden;
				border-radius: 10rpx;
			}

			.slot-btn {
				width: 702rpx;
				height: 296rpx;
				overflow: hidden;
				border-radius: 10rpx;
				position: relative;

				.uploadTxt {
					position: absolute;
					bottom: 20rpx;
					color: #2C2C2C;
					font-size: 24rpx;
					width: 100%;
					text-align: center;
				}
			}


		}
	</style>
